Dave's Home Page Helper

This doc is specially designed for folks in the CSU Stats Department; however, the actual home page program can be applied anywhere. The only thing that would change (if you wanted to put up a page on another edu site) is the configuration junk at the end that used to scare me very badly but I've moved on to bigger scarier things, so direct all config questions to dave@stat.colostate.edu.

Note: all through this I'm assuming you're using Netscape and NOT Mosaic to look at Web stuff. Both of them have a very important feature - a View Source command.

This'll allow you to actually see the code that does the stuff on the screen.

A Web home page is a program. The language of the program is called HTML, or Hypertext Markup Language. The implication of this is that you have to write an HTML program for everything that you put on the Web. You simply need to use a text editor on a file, stick some HTML in the file, then save your work. My fave text editor is vi, but you may use anything that will allow you to write simple text to a file. There are even some programs out there that write HTML like a word processor, but if you know how to use those, you don't need to read this.

If you'd like to just jump in to HTML, here are some really good places to start:

Although HTML is a computer language, it's one of the easiest ones I've ever seen (consider who put this page together..). HTML is simply a bunch of commands that does a bunch of text effects. Each of these commands have a switch to turn on a display and a switch to turn off the display.

The first command that you need is the html switch. This starts and ends an HTML document.

It looks like this:
<HTML>
All of your other
program statements
</HTML>

See how the commands are between "greater than" and "less than" symbols? The first

<HTML>
tells the browser that HTML is coming and the last
</HTML>
turns it off. I usually put the first one at the first line of my documents and the last one at the very last line.

The two sections of an HTML program

HTML documents have two parts:

  1. The HEAD part
  2. The BODY part

The entire document always looks like this:

<HTML>

<HEAD>
All of your HEAD statements
</HEAD>

<BODY>
All of your BODY statements
</BODY>

</HTML>

The HEAD part

You see up at the very top of your window where it says, "Netscape: Dave's Home Page Helper?" This is what you do inside the HEAD part. You label your page like this:

<HEAD>
<TITLE>Dave's Home Page Helper</TITLE>
</HEAD>
In case you don't believe me, View Source. Those statements will be at the very top of your View Source window. The TITLE command is really the only thing you need in the HEAD part.

The BODY part

The BODY part is where you do all of the fancy stuff, like write text, display pictures, and make links. The easiest thing to do in the BODY part is to make section headings.

This is a huge section heading

This is a smaller one

Here's the smallest one

This is the code that makes these section headings:

<h2>This is a large section heading</h2>
<h3>This is a smaller one</h3>
<h6>Here's the smallest one</h6>

You turn on a section heading by typing a line like

<h3>This is my really cool section heading</h3>
in your text file. The left
<h3>
switches on the heading and the right
</h3>
switches it off.

Paragraphs

"The BODY part" section heading above is an h3 heading. If you don't want your whole document to scream at people (which section headings do), then you just put things into a paragraph. A paragraph, like this one, starts with <p> and ends with </p>

This is what you would type in to reproduce the last paragraph in your home page:

<p>"The BODY part" section above heading is an h3 heading.  If you
don't want your whole document to scream at people 
(which section headings do), then you just put things into
a paragraph...</p>

Images

There are tons of things you can do with images. Fortunately, HTML will let you put .GIF, .JPEG, and .XBM images in a HTML document, plus a few others. Other formats like PostScript need a Postscript viewer (like ghostscript on statsun) so sometimes when you click on a Postscript document, it'll load via ghostscript.

Here's an image of Randy "Macho Man" Savage:

The Macho Man!

And here's the code that did it:

<p><img align=middle src="gifs/machoman.gif">The Macho Man!</p>

Look closely. I don't need to have a </img> command. But I do need to tell it where to align the text that went with it (if any). You can align text bottom, middle, top, plus a lot of other ways. For the complete list of alignments and all of the other options for images, look at Extensions to HTML. You also need to tell the filename and the directory of you image. In the above img command, "src="gifs/machoman.gif" does this. This looks for a file called "machoman.gif" in "public_html/gifs". So the path that is suggested by "src="gifs/machoman.gif" is "~ddave/public_html/gifs/machoman.gif".

Buttons, like the one to the left of this paragraph, and lines, like the one under this paragraph, are good in-line images. It's a bad idea to put in a lot of images (unless they're small like buttons and lines), and to put in any big images. Big images really slow down Mosaic and Netscape, and people get tired of waiting for them to load.

If you want to put a picture in your home page (like The Macho Man), you can use the scanners in the Weber 2nd floor computer lab (for free). Make sure you save your picture as a .GIF or a .JPG and not as a .PCX (the default). There are lots of places you can go to get pictures besides scanning in your own. Two places that come to mind are Thalia's Page and Yuval Fisher's Home Page. I have lots more specific sites for lines and spheres in my hotlist.

Hypertext Links

A link is one of these: Netscape HTML Extensions, those things you can click on that'll send you somewhere else. If you click on the text, you will be whisked away to another location. You can link to any site of which you know the address. I have a bunch of links from my main home page (this is one of them), but in my bio page, I have a link to a JPEG picture of Gettysburg soldiers. You can link to text files, hypertext files, ftp sites, or even places within documents. A Beginner's Guide to HTML is the best place to look for how to do the fancy stuff, but the most basic link is one to another document. A link goes like this:

<a href="some place">The name of the place</a>
"A" is for anchor. So here's the code that did the Beg. Guide above:
<a href="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">A Beginner's Guide to HTML</a> is the best..
The addresses usually start with "http" and are usually very ugly. The quotes inside href= are necessary. If you have a favorite site that you want to include in your home page, you can link it if you know the address. You can get the address from Mosiac or Netscape, then either retype it, or use the X-Windows copy/paste thing.

Web Stuff at CSU Stats

The first thing you need to do is get an account on one of the stats computers, or, at the very least, an account on Holly or Lamar. Got one? Okay. What we're going to do first is make a directory called "public_html", where all of your Web stuff will be stored. Type these next things, in order:

  1. cd
  2. mkdir public_html
  3. chmod go+x public_html
  4. cd public_html
Now we're in your public_html directory. We need to edit a file called "index.html". Since I like vi, I'd type "vi index.html", but pico, emacs, etc. are fine too. What I always do is have Netscape running when I edit ain HTML file, so I can see how it looks. From Netscape, it's File, Open File then select it.

Important Note: You always have to View, Reload if you make more than one change because Netscape and Mosaic "remember" what they've seen. They say "Yeah, I saw that file the first time you opened it, so I'll just show you that one again and again."

Once you're in your file, start typing! Don't forget the above layout (html, head, body..). When you're done, save the file. Now you have to change the permissions so everyone can see your page. Type this:

chmod go+r index.html

Another Important Note: You need to do "chmod go+r filename.html" for every file that you use. You also have to do "chmod go+x directory" for every subdirectory that you make. For example, I have a subdirectory of .GIFS, named "gifs". So I typed "chmod go+x gifs" while I was in my public_html directory. For every picture I put in the gifs directory, I typed "chmod go+r picture.gif".

Your home page is now on the Web! Your address is "http://www.stat.colostate.edu/~yourstatloginname/". Substitute "holly" or "lamar" for "www.stat" if you're on Holly or Lamar. If you're a stats grad student, tell Jim zumBrunnen or me about your page so we can link you from the Stats Dept page. Any questions? You can Mail Mail Dave from here or mail dave@stat.colostate.edu. Have fun!

Back to Dave's Unpretentious Home Page